<!-- 侧边栏 -->
<div class="lg:col-span-4">
    <div class="space-y-8 lg:sticky top-20">
        <!-- 搜索框 -->
        <div class="bg-white rounded-xl p-5 shadow-sm animate-slide-up" style="animation-delay: 0.3s">
            <h3 class="text-lg font-bold text-neutral-800 mb-4">搜索文章</h3>
            <div class="relative">
                <input type="text" placeholder="输入关键词搜索..." class="w-full pl-10 pr-4 py-3 rounded-lg border border-neutral-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all">
                <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400"></i>
            </div>
        </div>

        <!-- 热门标签 -->
        <div class="bg-white rounded-xl p-5 shadow-sm animate-slide-up" style="animation-delay: 0.4s">
            <h3 class="text-lg font-bold text-neutral-800 mb-4">热门标签</h3>
            <?php 
            // 自定义标签云函数，可根据需求修改逻辑
            function custom_tag_cloud() {
                $tags = get_tags(array(
                    'orderby' => 'count',
                    'order' => 'DESC',
                    'number' => 10
                ));
                if ($tags) {
                    echo '<div class="flex flex-wrap gap-2">';
                    foreach ($tags as $tag) {
                        $tag_link = get_tag_link($tag->term_id);
                        echo '<a href="' . esc_url($tag_link) . '" class="px-3 py-1.5 bg-neutral-100 text-neutral-600 rounded-full text-sm hover:bg-primary hover:text-white transition-colors">' . '#'.$tag->name . '</a>';
                    }
                    echo '</div>';
                }
            }
            custom_tag_cloud();
            ?>
        </div>

        <!-- 热门文章 -->
        <div class="bg-white rounded-xl p-5 shadow-sm animate-slide-up" style="animation-delay: 0.5s">
            <h3 class="text-lg font-bold text-neutral-800 mb-4">热门文章</h3>
            <div class="space-y-4">
                <?php
                $args = array(
                    'posts_per_page' => 5,
                    'meta_key' => 'post_views_count',
                    'orderby' => 'meta_value_num',
                    'order' => 'DESC'
                );
                $popular_posts = new WP_Query( $args );
                if ( $popular_posts->have_posts() ) :
                    while ( $popular_posts->have_posts() ) : $popular_posts->the_post();
                        $thumbnail_url = get_the_post_thumbnail_url( get_the_ID(), 'thumbnail' );
                        if ( ! $thumbnail_url ) {
                            $thumbnail_url = get_first_image_from_content();
                            if ( ! $thumbnail_url ) {
                                $thumbnail_url = wanzi_option('g_postthumbnail', get_template_directory_uri() . '/assets/img/default.jpg');
                            }
                        }
                        $post_views = get_post_meta( get_the_ID(), 'post_views_count', true ) ? get_post_meta( get_the_ID(), 'post_views_count', true ) : 0;
                        $post_date = human_time_diff( get_the_time('U'), current_time('timestamp') ) . '前';
                ?>
                <a href="<?php the_permalink(); ?>" class="flex group">
                    <div class="w-20 h-20 rounded-lg overflow-hidden flex-shrink-0">
                        <img src="<?php echo esc_url( $thumbnail_url ); ?>" alt="<?php the_title_attribute(); ?>" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
                    </div>
                    <div class="ml-4">
                        <h4 class="font-medium text-neutral-800 hover:text-primary transition-colors"><?php the_title(); ?></h4>
                        <p class="text-xs text-neutral-500 mt-1"><?php echo $post_views; ?> 阅读 · <?php echo $post_date; ?></p>
                    </div>
                </a>
                <?php
                    endwhile;
                    wp_reset_postdata();
                endif;
                ?>
            </div>
        </div>

        <!-- 订阅区 -->
        <div class="bg-gradient-to-br from-primary to-primary/80 rounded-xl p-6 text-white shadow-lg animate-slide-up" style="animation-delay: 0.6s">
            <h3 class="text-xl font-bold mb-2">订阅资讯推送</h3>
            <p class="text-white/80 mb-4">获取每日精选内容，不错过任何重要资讯</p>
            <form class="newsletter-form space-y-3">
                <input type="email" name="email" placeholder="输入您的邮箱地址" class="w-full px-4 py-3 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-white/30 backdrop-blur-sm" required>
                <button type="submit" class="w-full py-3 bg-white text-primary font-medium rounded-lg hover:bg-white/90 transition-colors">
                    立即订阅
                </button>
                <p class="newsletter-feedback text-sm mt-2 h-4 text-center"></p>
            </form>
            <p class="text-xs text-white/60 mt-3 text-center">我们尊重您的隐私，绝不会分享您的个人信息</p>
        </div>

        <!-- 广告区 -->
        <div class="bg-white rounded-xl overflow-hidden shadow-sm animate-slide-up" style="animation-delay: 0.7s">
            <a href="#" class="block relative">
                <img src="https://picsum.photos/400/200?random=30" alt="合作伙伴广告" class="w-full h-auto">
                <div class="absolute top-2 right-2 bg-black/30 text-white text-xs px-1.5 py-0.5 rounded">广告</div>
                <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/70 to-transparent">
                    <h4 class="text-white font-medium">探索未来科技峰会</h4>
                    <p class="text-white/80 text-sm">2025年8月15-17日 · 上海国际会议中心</p>
                </div>
            </a>
        </div>
    </div>
</div>